<template>
  <div class="SetMainUpdate">
    <header class="aui-bar aui-bar-nav" style="border-bottom: 1px solid #ccc;">
      <a class="aui-pull-left aui-btn" style="font-size: 1.4rem !important" >
        <img @click="goBack()" src="../img/left.png" alt="">升级固件版本
      </a>
    </header>
    <section>
      <div style="width: 100%;height: 10rem;text-align: center">
        <img src="../img/xiaopugongz.png" style="display:block;width: 8rem;height: 8rem;margin:4rem auto"/>
      </div>
      <div style="padding: 0.2rem 3rem;border-bottom: 1px solid ghostwhite">
        <span style="font-size: large;font-weight: bold">马桶爆炸升级</span><span> | </span><span>正式版</span><span> | </span><span>58K</span>
      </div>
      <div style="padding: 0.2rem 3rem;">
        <span style="font-size: large;font-weight: bold">升级内容</span><span> <br /> </span><span>【更新智能设备】</span><span> <br /></span><span>【添加新模块】</span>
      </div>
      <div v-if="UpdateTypeStatus==0" class="shenjiContent">
        <div @click="UpdateSystem()" v-if="showBnt==true" class="lijibtn">立即升级</div>
        <div  v-if="showBnt==false"  style="height: 3rem">正在升级 {{textTT}}% </div>
        <div v-if="showBnt==false" class="progressContainer">
          <div class="progress" :style="{width:progress+'%'}">

          </div>
        </div>
        <div v-if="showBnt==false" >升级中请勿退出，否则可能导致App功能损坏</div>
      </div>

      <div v-if="UpdateTypeStatus==1||isUpdateInYUN==false" class="shenjiContent">
        <div  class="lijiSuccess">已是最新版</div>
      </div>

      <!--<div class="shenjiContent">-->
        <!--<div @click="UpdateSystem()" v-if="showBnt==true" class="lijibtn">立即升级</div>-->
        <!--<div  v-if="showBnt==false"  style="height: 3rem">正在升级 {{textTT}}% </div>-->
        <!--<div v-if="showBnt==false" class="progressContainer">-->
          <!--<div class="progress" :style="{width:progress+'%'}">-->

          <!--</div>-->
        <!--</div>-->
        <!--<div v-if="showBnt==false" >升级中请勿退出，否则可能导致App功能损坏</div>-->
      <!--</div>-->

    </section>
    <updateInfo v-if="updateInfo" @closeTip="closeTip" :alertText="alertText"></updateInfo>
    <updateInfoTT v-if="ConnectStatusUpdate==false" @closeTipTT="closeTipTT" :alertTextTT="alertTextTT"></updateInfoTT>

    <iSLeaveUpdateAlert v-if="iscloseTipIsleave" @closeTipIsleave="closeTipIsleave" :alertTextQuit="alertTextQuit"></iSLeaveUpdateAlert>
  </div>
</template>

<script>
import {mapMutations,mapState} from 'vuex'
import Loading from '../../common/Loading'
import iSLeaveUpdateAlert from '../../common/iSLeaveUpdateAlert'
import updateInfo from '../../common/updateInfo'
import updateInfoTT from '../../common/updateInfoTT'
import {Register} from '../../../store/_CRC'

export default {
  name: 'SetMainUpdate',
  data () {
    return {
      iscloseTipIsleave:false,
      updateInfoTT:false,
      alertTextTT:'',
      alertTextQuit:'设备升级中，请勿离开页面操作，否则将导致升级失败！',
      alertText:'',
      updateInfo:false,
      isUpdateING:false,
      showBnt:true,
      CanClickTimes:true,
      showAlert:true,
      textTT: 0,
      totalLength:0,
      progress:0,
      progressPresant:0,
    }
  },
  components: {
    Loading,
    updateInfo,
    iSLeaveUpdateAlert,
    updateInfoTT
  },
  computed:{
    ...mapState([
      'settingsAlert',
      'ConnectStatusUpdate',
      'isUpdateInYUN',
      'UpdateTypeStatus',
      'showAlertState',
      'yiFaLength',
      'UpdateFileData',
      'IsUpdateTypeValueC',
      'reciveState',
      'reciveLen',
      'reciveData',
      'connectEnd',
      'stateData',
      'startAddr',
      'IsConnect ',
      'stateEndSet'
    ])
  },
  watch: {
    ConnectStatusUpdate(val){
      if(this.ConnectStatusUpdate==true) {
        window.hilink.finishDeviceActivity()
      }
      this.showBnt = true
      window.cleartUpData()
      window.setUpdateTypeStatus(0)
      this.alertTextTT = "连接断开，升级失败！请重启设备再进行升级。"
      this.updateInfoTT = true
    },
    // settingsAlert(val) {
    //   this.showBnt = true
    //   window.cleartUpData()
    //   window.setUpdateTypeStatus(0)
    //   this.alertTextTT = "连接断开，升级失败！请重启设备再进行升级。"
    //   this.updateInfoTT = true
    //   console.log('aagg66')
    // },
    UpdateTypeStatus(re){
      this.updateInfo = true
      if(this.UpdateTypeStatus==1) {
        this.alertText = "升级成功！"
      } else if(this.UpdateTypeStatus==2){
        this.alertText = "----內存泄露,升级失败，请重启马桶重新升级！"
      } else if(this.UpdateTypeStatus==3){
        this.alertText = "最后一包写入错误，请重启马桶重新升级！"
      }
    },
    yiFaLength (val) {
      console.log('aaa')
      this.showLoading = true
      this.totalLength = this.UpdateFileData.length
      // this.textTT = this.totalLength+'/'+ this.yiFaLength
      this.textTT = parseInt(this.yiFaLength/this.totalLength*100)
      if (this.textTT > 100){
        this.textTT = 100
        window.cleartUpData()
      }
      this.progress = this.textTT
    }
  },
  created(){

  },
  methods: {
    ...mapMutations([ 'WTGSTATE','TOTLECALLBACK','setRegisterBitValue','SetMainMUT','SetIsUpdateTypeValueC','AxiosTdev'
    ]),
    closeTipIsleave(){
      this.iscloseTipIsleave = false
    },
    // 操作部分
    closeTip(){
      window.cleartUpData()
      if (this.UpdateTypeStatus==1){

      } else {
        this.showBnt = true
        window.setUpdateTypeStatus(0)
      }
      this.updateInfo = false
      clearInterval(window.setIntervalId)
      window.setIntervalId = setInterval("window.writeInterval()",1000)
      window.hilink.finishDeviceActivity()
    },
    closeTipTT(){
      this.textTT = ''
      this.updateInfoTT = false
      clearInterval(window.setIntervalId)
      window.setIntervalId = setInterval("window.writeInterval()",1000)
      window.hilink.finishDeviceActivity()
    },
    goBack(){
      if (this.isUpdateING === true) {
        if (this.UpdateTypeStatus===1) {
          clearInterval(window.setIntervalId)
          window.setIntervalId = setInterval("window.writeInterval()",1000)
          this.$router.go(-1)
        } else {
          this.iscloseTipIsleave = true
        }
      } else {
        clearInterval(window.setIntervalId)
        window.setIntervalId = setInterval("window.writeInterval()",1000)
        this.$router.go(-1)
      }
    },
    UpdateSystem () {
      this.isUpdateING = true
      this.showBnt = false
      clearInterval(window.setIntervalId)
      if(this.CanClickTimes == false) {
        return
      }
      this.CanClickTimes = false
      this.AxiosTdev()
      this.SetIsUpdateTypeValueC({type: 1})
      //查看90寄存器是否为1
      var wrTore = Register.getF03String(1, 90, 1)
      var deviceId = window.getStorageSync('deviceId');
      var serviceId = window.getStorageSync('serviceId');
      var characteristicId = window.getStorageSync('characteristicId');
      var data = window.writeTo16(wrTore);
      console.log('写入：1，90，1')
      window.hilink.writeBLECharacteristicValue(deviceId, serviceId, characteristicId, data, "writeCallback")
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .lijiSuccess{
    padding: 2rem 4rem;
    background-color: #00acc1;
  }
  .shenjiContent{
    text-align: center;
    width: 100%;
    position: absolute;
    bottom:2rem;
  }
  .lijibtn{
    text-align: center;
    width:80%;
    height:2rem !important;
    line-height: 2rem !important;
    margin:0 10% !important;
    color:#0075f0;
    font-size:0.8rem;
    border:1px solid #ccc;
    border-radius: 1.125rem!important;
    background: #f7f7f7;
  }
  .headerDiv{
    height: 2rem;
    width: 100%;
    /*background-color: #288af0;*/
  }
  body{
    background: #ffffff !important;
  }
  .aui-bar-nav {
    background: #ffffff;
  }
  .aui-bar-nav a {
    color: #000 !important;
  }
  .aui-content{
    margin:0 0.5rem;
  }
  .aui-content>ul>li{
    border-bottom: 1px solid #ccc;
    padding:0.5rem 0;
  }
  .detection{
    margin:0 1rem;
    height:2.25rem;
    line-height: 2.25rem;
    border-bottom:1px solid #ccc
  }
  .aui-list .aui-list-item-inner{
    padding:0.75rem 0.5rem 0.75rem 0;
  }
  div.progressContainer{
    width: 90%;
    margin-left: 5%;
    height: 0.2rem;
    /*border: 1px solid #0064B4;*/
    border-radius: 0.2rem ;
    background-color:#e6e6e6;
    background-color: #ddd;
    margin-bottom: 2rem;
  }
  div.progress{
    display:block;
    height: 0.2rem;
    background: #0064B4;
    height: 0.2rem;
  }
</style>
